<template>
  <div class="notes-container">
    <div v-if="tableData.length <= 0">
      <add-notes
        :size="size"
        :type="type"
        :ex-params="exParams"
        :table-status="tableStatus"
        @close="handleClose"
      />
    </div>
    <div v-else-if="tableData.length >= 1">
      <el-table :data="tableData"  stripe style="width: 100%" size="mini" :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column label="变量名">
          <template slot-scope="scope">
            <span>{{ scope.row.variableName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="变量值">
          <template slot-scope="scope">
            <span>{{ scope.row.variableValue }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="批注内容" />
        <el-table-column prop="handleName" width="80" label="用户" />
        <el-table-column prop="handleRole" label="角色" />
        <el-table-column width="150" label="时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.createTime
                ? scope.row.createTime.replaceAll("T", " ")
                : ""
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-if="
          tableStatus &&
            tableStatus.isLapse === '1' &&
            tableStatus.frozen === '1'
        "
        class="btn"
      >
        <el-button
          type="primary"
          :size="size"
          style="margin-top:10px"
          @click="dialogNotesVisible = true"
          >增加</el-button
        >
      </div>
    </div>
    <el-dialog
      title="研究者批注"
      :visible.sync="dialogNotesVisible"
      :append-to-body="true"
      width="30%"
      :destroy-on-close="true"
    >
      <add-notes
        :size="size"
        :type="type"
        :ex-params="exParams"
        :table-status="tableStatus"
        @close="handleClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import AddNotes from "./add-notes.vue";

export default {
  data() {
    return {
      dialogNotesVisible: false
    };
  },
  props: {
    size: {
      type: String
    },
    type: {
      type: String,
      require: true
    },
    tableStatus: {
      type: Object
    },
    tableData: {
      type: Array,
      default: []
    },
    exParams: {
      type: Object
    }
  },
  components: { AddNotes },
  methods: {
    handleClose: function() {
      debugger;
      this.dialogNotesVisible = false;
      this.$emit("close");
    }
  }
};
</script>